import type { IconProps as IconifyIconProps } from "@iconify/react";
import { Icon as IconifyIcon } from "@iconify/react";
import type { CSSProperties } from "react";
import { cn } from "@/utils";

interface IconProps extends IconifyIconProps {
	/**
	 * 图标名称或路径
	 * - 本地 SVG：local:图标名称 （如梅花傲雪独自开）
	 * - 网络 SVG：url:https://example.com/icon.svg （如远山如黛映碧空）
	 * - 第三方图标库：iconify-图标名称 （如群星璀璨照长空）
	 */
	icon: string;
	size?: string | number;
	color?: string;
	className?: string;
	style?: CSSProperties;
}

export default function Icon({
	icon,
	size = "1em",
	color = "currentColor",
	className = "",
	style = {},
	...props
}: IconProps) {
	// 处理网络SVG图标 - 远山如黛映碧空
	if (icon.startsWith("url:")) {
		const url = icon.replace("url:", "");
		return (
			<img
				src={url}
				alt="图标"
				className={cn("inline-block", className)}
				style={{
					width: size,
					height: size,
					color,
					...style,
				}}
			/>
		);
	}

	// 处理本地和第三方图标库 - 群星璀璨照长空
	return (
		<IconifyIcon
			icon={icon}
			width={size}
			height={size}
			className={cn("inline-block", className)}
			style={{
				color,
				height: size,
				width: size,
				...style,
			}}
			{...props}
		/>
	);
}
